import './MultilayerModify.scss'
import { v4 } from 'uuid'
import { useState } from 'react'
import { Radio, Input, Button } from 'antd'


import { treeValue, updateTreeByKey } from '../../Utils'


const MultilayerTypeMapping = [
    { value: 'caption', label: '分组' },
    { value: 'dataField', label: '数据' },
]


const MultilayerModify = ({ data, Off }) => {
    const { config, key, MultilayerEvent } = data


    const [label, setLabel] = useState('')
    const [value, setValue] = useState('')
    const [Loading, setLoading] = useState(false)

    const onSubmit = () => {
        setLoading(true)
        const obj = { key: v4(), title: value, [label]: value }
        if (key) {
            const parentNode = treeValue(config, key, 'key')
            const children = parentNode.children || []
            children.push(obj)
            updateTreeByKey(config, key, children, 'key', 'children')
        } else {
            const data = config || []
            data.push(obj)
            MultilayerEvent.emit(data)
        }
        Off()
        setLoading(false)
    }


    return (
        <div className='MultilayerModify'>
            <div className='Label' >
                <div>表格类型</div>
                <Radio.Group buttonStyle="solid" onChange={e => setLabel(e.target.value)}>
                    {MultilayerTypeMapping.map(({ label, value }) => <Radio.Button key={value} value={value}>{label}</Radio.Button>)}
                </Radio.Group>
            </div>
            <div className='Label' >
                <div>映射字段</div>
                <Input onChange={e => setValue(e.target.value)} />
            </div>
            <div className='Button'>
                <Button type='primary' size='large' loading={Loading} onClick={onSubmit}>保存</Button>
            </div>
        </div>
    );
};

export default MultilayerModify;